<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tempo :: Twitter Example</title>

	<!-- Import the 1KB CSS Grid -->
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">

	<!-- Import styles for the universal footer -->
	<link rel="stylesheet" href="../css/examples.css" type="text/css" media="screen">

	<style type="text/css" media="screen">
		/* reset and basic typography */
		body {
			margin: 0;
			padding: 0;
			font-family: Helvetica, Arial, sans-serif;
		}
		h1, ol#tweets p {
			font-family: Georgia, "Times New Roman", serif;
			font-weight: normal;
		}
		ol {
			margin: 0;
			padding: 0;
			list-style: none outside none;
		}
		
		/* header */
		#header {
			background-color: black;
			margin-bottom: 2em;
		}
		h1 {
			color: white;
			padding: 0.667em 0;
			margin: 0;
			text-align: center;
		}

		/* tweets */
		ol#tweets.loading {
			padding: 6em 0;
			background: url('../images/loading.gif') no-repeat center;
		}
		ol#tweets li {
			padding: 1.25em 0;
			border-bottom: 1px solid #e9e9e9;
		}
        ol#tweets li.error {
            margin: 50px 0 30px 0;
            font-family: Georgia, "Times New Roman", serif;
            text-align: center;
            font-size: 1.5em;
        }
		ol#tweets p {
			font-size: 1.5em;
			color: #666;
		}

        ol#tweets p span.time {
            font-size: 0.7em;
			color: #bbb;
		}

		.user img {
			float: right;
			padding: 5px;
			border: 1px solid #e9e9e9;
			margin-right: 20px;
		}
		.user h3 {
			float: right;
			margin: 0 15px 0 0;
			color: #333;
			line-height: 60px;
		}

	</style>
	
	<!-- Import Tempo -->
	<script type="text/javascript" src="../../tempo.min.js"></script>
	
	<!-- This example uses jQuery's ajax() method to retrieve data from Twitter -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			var twitter = Tempo.prepare('tweets').when(TempoEvent.Types.RENDER_STARTING, function(event) {
                $('ol').toggleClass('loading');
			}).when(TempoEvent.Types.RENDER_COMPLETE, function(event) {
                $('ol').toggleClass('loading');
            });
			twitter.starting();
			$.getJSON("http://search.twitter.com/search.json?q='groucho'&rpp=10&callback=?", function(data) {
				twitter.render(data.results);
			});
		});
	</script>
</head>
<body>


<!-- Header -->
<div id="header">
	<div class="row">
		<div class="column grid_12">
			<h1>Tempo and Twitter, sittin&rsquo; in a tree</h1>
		</div>
	</div>
</div>


<!-- Tweets -->
<ol id="tweets">
	<li class="row" data-template style="display: none;">
		<div class="column grid_4 user">
			<img src="../images/tweeter.png" data-src="{{profile_image_url}}" height="48" width="48" />
			<h3>{{from_user}}</h3>
		</div>
		<p class="column grid_8 text">
            {{text | replace '@([A-z0-9_]+)', '@<a href="http://twitter.com/$1">$1</a>'}}<span class="time">, {{created_at | date '\at HH:mm on EEEE' }}</span>
        </p>
	</li>
    <li class="error" data-template-fallback>
        Sorry, but you sort of need JavaScript for this one!
    </li>
</ol>


<!-- Universal Footer -->
<ul id="tempo-actions">	
	<li><a href="http://tempojs.com/">Back to the Overview</a></li>
	<li class="download"><a href="https://github.com/twigkit/tempo/archive/2.0.zip">Download</a></li>
	<li><a href="https://github.com/twigkit/tempo">View on GitHub</a></li>
</ul>
<div id="footer">
	<div class="row">
		<p>Brought to you by the friendly guys at <a href="http://twigkit.com/">Twigkit</a>. Follow <a href="http://twitter.com/mrolafsson">Stefan Olafsson</a> and <a href="http://twitter.com/tylertate">Tyler Tate</a> on Twitter.</p>
	</div>
</div>


</body>
</html>